<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>租赁要素</h2>
      </div>
      <div class="line"></div>
      <a-form :model="formData" layout="inline" :wrapper-col="wrapperCol">
        <a-row :gutter="20">
          <a-col :span="8">
            <a-form-item label="业务编号：" name="a"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="留购价款(元)：" name="b"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="内部收益率(%)：" name="c"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="购置总价(元)：" name="e"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="保险费用支出时间：" name="f"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="租赁产品：" name="g"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="融资金额(元)：" name="h"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="补贴金额(元)：" name="i"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="首付款金额(元)：" name="j"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="广商贴息(元)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="计划起租日：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="厂商返利(元)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="厂商贴息时间：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="租赁期限(月)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="承租人风险金(元)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="租金支付方式：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="计息方式：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="保险费用支出(元)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="提前结清(%)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="其他风险金(元)：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="预计补贴时间：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="计划终止日：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="还款频次：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="租赁利率(固定利率/月)%：" name="k"> NJZL-HZ-202401-0006 </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="品牌" name="k">
              <a-input-group compact>
                <a-select v-model:value="formData.k" style="width: 100px">
                  <a-select-option value="Sign Up">Sign Up</a-select-option>
                  <a-select-option value="Sign In">Sign In</a-select-option>
                </a-select>
                <a-auto-complete v-model:value="formData.k" :data-source="dataSource" style="width: 200px" placeholder="Email" />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="农机机具类型" name="k">
              <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="租赁物名称及规格型号" name="k">
              <a-textarea v-model:value="formData.k" :rows="4" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <div class="next">
                <a-button type="primary" class="next-step submit">保存</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';

  const labelCol = ref({ style: { width: '120px' } });
  const wrapperCol = ref({ span: 14 });
  const formData = ref({
    a: '',
    b: '',
    c: '',
    d: '',
    e: '',
    f: '',
    g: '',
    h: '',
    i: '',
    j: '',
    l: '',
  });
  const options = ref([
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ]);
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    flex: 1;
    overflow: auto;
  }
  .top {
    margin-bottom: 33rem;
    display: flex;
    align-items: center;
    position: relative;
    h2 {
      width: 100%;
      font-family: Microsoft YaHei;
      font-size: 30rem;
      color: #000000;
      margin-bottom: 0;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .line {
    border-bottom: 15rem solid #f7f7f7;
    margin-bottom: 67rem;
  }
  .ant-col {
    margin-bottom: 28rem;
  }
  .next {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .ant-input,
  .ant-select,
  .ant-picker {
    border: 0;
    background: transparent !important;
    border-top: 1px solid #c7c6c6 !important;
    border-left: 1px solid #c7c6c6 !important;
    border-right: 1px solid #c7c6c6 !important;
    border-bottom: 1px solid #c7c6c6 !important;
    border-radius: 5px !important;
  }
</style>
